<template>
  <div class="CommodityTabs">
    <div class="ele-radioGroup">
      <el-radio-group v-model="state" @change="handelRadio">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="lease">租赁</el-radio-button>
        <el-radio-button label="sale">售卖</el-radio-button>
      </el-radio-group>
      <el-button
        type="primary"
        @click="addStoreGoods"
      >添加商品</el-button>
    </div>
    <div class="ele-table">
      <el-table
        ref="tables"
        v-loading="loading"
        :header-cell-style="getRowClass"
        :data="Bindata"
        height="400"
        @selection-change="handelChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="商品" prop="name" width="90">
          <template slot-scope="scope">
            <TableColumnGoodsImage :src="scope.row.goodsPic" />
            <!--            <img
              width="80"
              height="80"
              :src="
                scope.row.goodsPic.includes('https')
                  ? scope.row.goodsPic
                  : baseUrl + scope.row.goodsPic
              "
              alt="加载失败"
            >-->
          </template>
        </el-table-column>
        <el-table-column width="300">
          <template slot-scope="scope">
            <div class="custom-div">
              <div class="custom-div-left" />
              <div class="custom-div-right">
                <p>
                  <span>{{ scope.row.goodsName }}</span>
                </p>
                <p>
                  <span>型号:{{ scope.row.goodsSpec }}</span>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="库存" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.storeStock"
            >门店库存:{{ scope.row.storeStock || 0 }}</span>
            <span
              v-if="scope.row.chainStock"
            >软链库存:{{ scope.row.chainStock || 0 }}</span>
            <span
              v-if="scope.row.cabinetStock"
            >医柜库存:{{ scope.row.cabinetStock || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="goodsType">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsType == 'lease'">租赁</span>
            <span v-else-if="scope.row.goodsType == 'sale'">售卖</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="450"
          header-align="right"
        >
          <template slot-scope="scope">
            <div class="custom-operation">
              <div class="left">
                <p v-if="scope.row.setMaintain == '0'">
                  <el-alert title="未设置运费" type="error" effect="dark" />
                </p>
                <p v-if="scope.row.setRfid == '0'">
                  <el-alert title="未添加RFID设备" type="error" effect="dark" />
                </p>
              </div>
              <div>
                <p>
                  <el-button
                    v-if="scope.row.setRfid == '0'"
                    type="primary"
                    plain
                    @click="handelRfid(scope.row)"
                  >RFID设备管理</el-button>
                </p>
                <p>
                  <el-button
                    type="primary"
                    plain
                    @click="handelDetails(scope.row)"
                  >详情</el-button>
                </p>
              </div>
              <div>
                <p>
                  <el-button
                    type="primary"
                    plain
                    @click="handelYWFmanger(scope.row)"
                  >运维费管理</el-button>
                </p>
                <!-- <p>
                <el-button type="primary" plain>控制器管理</el-button>
              </p> -->
                <p>
                  <el-button
                    type="danger"
                    plain
                    @click="handelCancel([scope.row.storeGoodsId])"
                  >取消运营</el-button>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="ele-div-2">
        <div class="left">
          <el-button
            type="primary"
            plain
            @click="$refs.tables.toggleAllSelection()"
          >全选</el-button>
          <el-button
            type="danger"
            plain
            @click="handelRowsCancel"
          >取消运营</el-button>
        </div>
        <div class="right">
          <el-pagination
            :current-page="pages.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pages.pageSzie"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 运维费管理 -->
    <el-dialog :visible.sync="visible_1" width="550px" :modal="false">
      <div slot="title">
        <b>员工运维费用设置</b>
      </div>
      <div class="cus-data">
        <div class="left">
          <el-card>
            <img :src="dialogForm.userImage" alt="未获取">
            <p style="text-align: center">{{ dialogForm.goodsName }}</p>
          </el-card>
        </div>
        <div class="right">
          <el-form ref="dialogForm" :model="dialogForm" :rules="pattern">
            <el-form-item label="选择运维费用模板:" prop="maintainTemplateId" style="margin-bottom: 50px">
              <el-select
                v-model="dialogForm.maintainTemplateId"
                clearable
                filterable
                @change="maintainChange"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="form-last-item-0">
              <el-col :span="24" type="flex">
                <el-col :span="7">
                  <el-card>
                    <p>配送:</p>
                    <p>￥{{ dialogForm.distributionPrice || 0 }}</p>
                  </el-card>
                </el-col>
                <el-col :span="7" class="el-col-offset-1">
                  <el-card>
                    <p>配货:</p>
                    <p>￥{{ dialogForm.deliveryPrice || 0 }}</p>
                  </el-card>
                </el-col>
                <el-col :span="7" class="el-col-offset-1">
                  <el-card>
                    <p>维护:</p>
                    <p>￥{{ dialogForm.maintainPrice || 0 }}</p>
                  </el-card>
                </el-col>
              </el-col>
            </el-form-item>
            <el-form-item class="form-last-item-1">
              <el-button type="primary" @click="handelSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <goods-dialog
      ref="storeGoodsDialog"
      :visible="visible_2"
      :store-id="storeId"
      @handelClose="visible_2 = false"
      @handelAddRows="handelAddRows"
    />
  </div>
</template>

<script>
/** 商品 tabs */
import GoodsDialog from '@/components/Custom/goods_dialog.vue'
import { YWFTemplateList } from '@/api/customAPI/shop/YWFTemplate'
import {
  commodityDetail, commodityDetailGetSetting,
  commodityDetailSetting,
  commodityDetialcancel
} from '@/api/customAPI/shop/store'
import { Loading } from 'element-ui'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage/index'
export default {
  name: 'CommodityTabs',
  components: {
    GoodsDialog,
    TableColumnGoodsImage
  },
  props: {
    storeId: {
      type: [Number, String],
      required: true
    },
    storeInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false,
      state: '',
      keySearch: '',
      visible_1: false,
      visible_2: false,
      currentPage: 1,
      Bindata: [],
      storeGoodsId: '',
      dialogForm: {
        userImage: '',
        goodsName: '',
        maintainTemplateId: '',
        maintainPrice: 0,
        deliveryPrice: 0,
        distributionPrice: 0
      },
      pattern: {
        maintainTemplateId: [
          { required: true, message: '请选择运维费用模板', trigger: 'change' }
        ]
      },
      selection: [],
      options: [],
      Bindata_addCommodity: [{ test: '1111' }],
      pages: {
        pageIndex: 1,
        pageSzie: 20,
        total: 0
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getcommodityDetailList()
    })
  },
  mounted() {},
  activated() {
    this.$nextTick(() => {
      this.getcommodityDetailList()
    })
  },
  methods: {
    maintainChange(v) {
      var info = this.options.find(inf => inf.id === v)
      this.dialogForm.maintainPrice = info.maintainPrice
      this.dialogForm.deliveryPrice = info.deliveryPrice
      this.dialogForm.distributionPrice = info.distributionPrice
      this.dialogForm.userImge = info.userImge
    },
    /** // 运维费管理 */
    handelYWFmanger(row) {
      this.storeGoodsId = row.storeGoodsId
      YWFTemplateList({
        shopId: localStorage.getItem('shopId'),
        keySearch: this.keySearch,
        type: row.goodsType === 'sale' ? 0 : 1,
        page: 1,
        limit: 0
      })
        .then(result => {
          this.visible_1 = true
          this.dialogForm.userImage = row.goodsPic.includes('https') ? row.goodsPic : this.baseUrl + row.goodsPic
          this.dialogForm.goodsName = row.goodsName
          this.options = result.data.data.data
          commodityDetailGetSetting({ storeGoodsId: this.storeGoodsId }).then(res => {
            this.dialogForm.maintainTemplateId = res.data.data.maintainTemplateId
            this.maintainChange(this.dialogForm.maintainTemplateId)
          }).catch(res => {
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    handelRfid(row) {
      this.$router.push({
        name: 'DeviceManagement',
        query: { p: this.$ed({
          rows: row,
          storeId: this.storeId
        }) }
      })
    },
    handelDetails(row) {
      console.log(row)
      this.$router.push({
        name: 'ShopStoreDetails',
        query: {
          p: this.$ed({
            commodityInfo: {
              goodsId: row.storeGoodsId,
              goodsName: row.goodsName,
              goodsImg: row.goodsPic,
              type: row.goodsType
            },
            storeInfo: this.storeInfo
          })
        }
      })
    },
    /** 获取添加商品 */
    handelAddRows(row) {
      console.log(row)
      this.$router.push({
        name: 'AddGoodsShop',
        query: {
          p: this.$ed({
            commodityInfo: {
              goodsId: row.goodsId,
              goodsName: row.goodsName,
              goodsImg: row.goodsImg,
              type: row.type
            },
            shopInfo: this.storeInfo
          })
        }
      })
      this.visible_2 = false
    },
    handelSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          commodityDetailSetting({
            storeGoodsId: this.storeGoodsId || '',
            maintainTemplateId: this.dialogForm.maintainTemplateId || ''
          }).then(result => {
            loadingInstance.close()
            this.$message.success('成功')
            this.getcommodityDetailList()
            this.visible_1 = false
          })
        }
      })
    },
    addStoreGoods() {
      this.visible_2 = !this.visible_2
      this.$refs.storeGoodsDialog.loadding()
    },
    /** 多选 */
    handelChange(row) {
      console.log(row)
      this.selection = row.map(inf => inf.storeGoodsId)
    },
    /** 取消运营-多行 */
    handelRowsCancel() {
      if (this.selection.length > 0) {
        this.$confirm('确定要取消吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showClose: true,
          type: 'warning'
        }).then(() => {
          this.commodityDetialcancel(this.selection.toString())
        })
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    /** 取消运营-单行 */
    handelCancel(id) {
      this.$confirm('确定要取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: true,
        type: 'warning'
      }).then(() => {
        this.commodityDetialcancel(id.toString())
      })
    },
    commodityDetialcancel(id) {
      commodityDetialcancel({
        storeGoodsIds: id
      }).then(result => {
        this.$message.success('成功')
        this.getcommodityDetailList()
      })
    },
    /** 商品状态变动查询 */
    handelRadio() {
      this.getcommodityDetailList()
    },
    getcommodityDetailList() {
      this.loading = true
      commodityDetail({
        storeId: this.storeId,
        state: this.state,
        page: this.pages.pageIndex,
        limit: this.pages.pageSzie
      })
        .then(result => {
          this.Bindata = result.data.data.list
          this.pages.total = result.data.data.total
          this.loading = false
        })
        .catch(err => {
          this.$message.warning(err)
          this.loading = false
        })
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>
<style lang="scss" scoped>
.CommodityTabs {
  .ele-radioGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ele-table {
    margin-top: 30px;
    ::v-deep.el-table__fixed,
    ::v-deep.el-table__fixed-right {
      height: 100% !important;
    }
    .custom-div {
      display: flex;
      align-items: flex-start;
      .custom-div-left {
        width: 80px;
        height: 80px;
        img {
          width: 80px;
          height: 80px;
          object-fit: cover;
        }
      }
      .custom-div-right {
        p {
          margin-top: 0;
          // span {
          //   // margin-left: 15px;
          // }
        }
      }
    }
    .custom-operation {
      display: flex;
      justify-content: flex-end;
      div {
        padding-left: 10px;
        p {
          margin: 5px 0px;
          .el-alert {
            height: 36px;
          }
          .el-button {
            width: 120px;
          }
        }
      }
      .left {
        width: 160px;
      }
    }
  }
  .ele-div-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    .left {
      width: 220px;
      .el-button {
        width: 100px;
      }
    }
  }
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        /*.el-form-item__error {
          margin-left: 140px;
        }*/
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
    // 添加商品的style
    .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
    .ele-table {
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
    .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
